<template>
  <div>
    <a-modal :title="title" wrapClassName="addModal" :visible="visible" :destroyOnClose="true" @cancel="handleCancel()" :footer="null" width="860px">
      <div class="scroll">
        <a-form-model ref="ruleForm" layout="vertical" :model="form" :rules="rules">
          <div class="row">
            <a-form-model-item label="类目名" ref="name" prop="name">
              <a-input size="large" v-model="form.name" class="input" placeholder="请输入新菜类目名"></a-input>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
      <div class="submit-con">
        <a-button type="primary" icon="close-circle" ghost @click="handleCancel()" class="cancel">
          取消退出
        </a-button>
        <a-button type="primary" icon="check-circle" @click="save()" class="issue">
          保存
        </a-button>
      </div>
    </a-modal>
    <!-- <reach-ids-modal ref="reachIdsModal"
                     @select-done="onSelectDone"
                     :reach-ids="reachIds" /> -->
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import _ from "lodash";
import moment from "moment";
import api from "@/util/api"

export default {
  components: {},
  props: {
    title: {
      type: String,
      default: "类目名"
    },
    clearDetail: {
      type: Function
    },
    detail: {
      type: Object
    },
    refresh: {
      type: Function
    }
  },
  data() {
    return {
      visible: false,
      rules: {
        name: [{ required: true, message: "类目名", trigger: "blur" }]
      },
      headers: null,
      form: {
        name: ""
      }
    };
  },
  computed: {},
  watch: {
    detail: {
      handler(val) {
        if (val) {
          for (const key in val) {
            if (Object.hasOwnProperty.call(val, key)) {
              this.form[key] = val[key];
            }
          }
        }
      },
      deep: true
    },

    visible(val) {
      if (val && this.title === "新建类目") {
        this.resetForm();
      }
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    save() {
      const params = _.cloneDeep(this.form);
      if (this.title === "新建类目") {
        this.add(params);
      } else {
        this.edit(params);
      }
    },
    add(params) {
      // 调用api，发送保存
      let formData = new FormData();
      formData.append("name", params.name);
      formData.append("parentId", 1);
      api.post("/api/menu/add", formData).then((res) => {
        if(res.status == 200){
          this.visible = false;
          this.refresh();
          message.success("添加成功");
          this.resetForm();
        }
      });
    },
    edit() {
      this.visible = false;
      this.refresh();
      message.success("修改成功");
      this.resetForm();
    },
    resetForm() {
      this.form = {
        name: ""
      };
      this.clearDetail();
    },
    handleCancel() {
      this.visible = false;
      this.resetForm();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .addModal {
    .ant-modal-body {
      padding: 8px 0 64px 0;
    }

    .scroll {
      padding: 0 80px;
      height: 530px;
      overflow-y: scroll;
    }

    .row {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .input {
      width: 320px;
    }

    .is-center {
      padding: 0px !important;
      height: 31px !important;
      background: #fafafa;
      color: #434343;
    }

    .submit-con {
      text-align: center;

      .cancel {
        margin-right: 24px;
      }

      .cancel,
      .issue {
        width: 148px;
        height: 40px;
      }
    }

    .select {
      width: 320px;
    }
  }
}
</style>
